iT邦幫忙

第 12 屆 iThome 鐵人賽

DAY 2
0
Modern Web

30天前端網頁技術超入門介紹系列 第 2

Day2. SCSS 簡單介紹

  • 分享至 

  • xImage
  •  

什麼是 SCSS?

簡單一句話概括就是用來管理 CSS 的工具

那 SCSS 到底??

SCSS 只是 Sass 的其中一種寫法,所以並不能稱為語言。
SCSS 與 CSS 最大的差異在於瀏覽器能讀懂 CSS,但不能直接讀懂透過 SCSS 寫的內容。
因此得透過編譯的方式轉回 CSS 才行。

SCSS 的編譯工具?

最常用的編譯工具為 VSCode 的 Live Sass Compiler 套件
https://ithelp.ithome.com.tw/upload/images/20200911/20119051wacSxmIscE.png
安裝完後,最下面藍色區塊會出現 Watch Sass,按下去就會開始編譯,不能編譯時也會提醒你喔(真貼心~~

其次也有看過有人使用 Prepros,但因為 VSCode 的套件太好用了,所以至今還沒跳槽XD~

prepros 官網

一進入官網下滑就可以看到他還可以編譯其他東西,
https://ithelp.ithome.com.tw/upload/images/20200911/201190517ykuUJGmrF.png

其他還有使用 glupwebpack 等打包工具來編譯。

SCSS 的基礎撰寫架構

與一般的 CSS 基本上無異,僅需用大括號將底下的原件包覆在父元件中即可。
HTML 架構

<div class="tsDiv">
    <p class="tsP">測試中~~~</p>
</div>

傳統 CSS 寫法

.tsDiv > .tsP {
  color: red;
}

SCSS 寫法

.tsDiv {
  > .tsP {
    color: red;
  }
}

SCSS 寫法內的箭頭與 CSS 內所代表的意思相同,都是指父元件底下一層的子元件。

連接詞教學

& 代表連結符號
用於連接偽元素、偽類等等

.tsDiv {
  > .tsP {
    color: red;
    &:hover {
      color: blue;
    }
  }
}

在需要使用的地方直接用個連結符號,搭配合適的偽元素來達成目的。冒號也都只需一個。


以上就是今天的分享,明天會是簡單的變數介紹,盡請期待喽! Nice 進度剛好
https://ithelp.ithome.com.tw/upload/images/20200911/20119051Q08tDfjPue.png


上一篇
Day1. 前端寫作的旅程從這裡開始
下一篇
Day3. SCSS 簡單變數介紹
系列文
30天前端網頁技術超入門介紹30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言